<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 120"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#00407B" d="M15.938 27.188h82.5v29.648h8.437V22.5a3.746 3.746 0 0 0-3.75-3.75H11.25A3.746 3.746 0 0 0 7.5 22.5v60.938a3.746 3.746 0 0 0 3.75 3.75H52.5V78.75H15.937V27.187Z"/><path fill="#06F" d="M33.75 67.833c-1.11 0-2.04-.376-2.788-1.128-.75-.752-1.126-1.681-1.128-2.788-.003-1.107.373-2.037 1.128-2.789.754-.752 1.684-1.128 2.788-1.128H45.5c1.11 0 2.04.376 2.793 1.128.752.752 1.127 1.682 1.124 2.789-.003 1.107-.379 2.038-1.128 2.792-.75.755-1.68 1.13-2.789 1.124H33.75Zm0-19.583c-1.11 0-2.04-.376-2.788-1.128-.75-.752-1.126-1.682-1.128-2.789-.003-1.107.373-2.036 1.128-2.788.754-.752 1.684-1.128 2.788-1.128H45.5c1.11 0 2.04.376 2.793 1.128.752.752 1.127 1.681 1.124 2.788-.003 1.107-.379 2.038-1.128 2.793-.75.755-1.68 1.13-2.789 1.124H33.75Zm43.084 27.417c-5.419 0-10.036-1.91-13.854-5.73-3.817-3.82-5.727-8.438-5.73-13.854-.002-5.415 1.908-10.033 5.73-13.853 3.823-3.82 8.44-5.73 13.854-5.73 5.412 0 10.031 1.91 13.857 5.73 3.825 3.82 5.734 8.438 5.726 13.853a19.6 19.6 0 0 1-.834 5.633 17.505 17.505 0 0 1-2.495 5.138l12.337 12.338c.718.718 1.077 1.632 1.077 2.741 0 1.11-.359 2.024-1.077 2.742s-1.632 1.077-2.741 1.077c-1.11 0-2.024-.359-2.742-1.077L87.604 72.338a17.509 17.509 0 0 1-5.138 2.498 19.46 19.46 0 0 1-5.632.83Zm0-7.834c3.263 0 6.038-1.142 8.322-3.427 2.285-2.285 3.427-5.059 3.427-8.323 0-3.264-1.142-6.038-3.427-8.323-2.284-2.284-5.059-3.427-8.323-3.427-3.263 0-6.038 1.143-8.322 3.427-2.285 2.285-3.427 5.06-3.427 8.323 0 3.264 1.142 6.038 3.427 8.323 2.284 2.285 5.059 3.427 8.323 3.427Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey7 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
